<!-- <script>
export default {
  setup() {
    const message = 'hello vue3'
    const logMessage = () => {
      console.log(message);

    }
    return {
      message,
      logMessage

    }
  }
}
</script> -->
<script setup>
import sonCom from './components/sonCom.vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import testCom from './components/testCom.vue';

const message = 'hello vue3'
const logMessage = () => {
  console.log(message);
}
//reactive 只接受对象类型响应式
const mub = reactive({
  count : 100
})
const addMub =  () =>{
  mub.count++
}
const node = ref(0)
const addNode = () =>{
  node.value++
}
const arr = ref([1,2,3,4,5,6,7,8,9])

//computed
const arrFor = computed(()=>{
  return arr.value.filter(item => item>2)
})
const addArr = () =>{
  arr.value.push(222)
}

//watch
const count1 = ref(0)
const nickName = ref('zhangsan')
const changeNickName=() =>{
  nickName.value = 'lisi'
}
const changeCount1=() =>{
  count1.value++
}
watch([count1,nickName],(newValue,oldValue) =>{
  console.log(newValue,oldValue);
  
})
//watch deep
const userInfor = ref({
  name:'yiyi',
  age:18
})
const changeUserInfor = () =>{
  userInfor.value.age++
}
const changeUserInforname = () =>{
  userInfor.value.name='lisi'
}
watch(userInfor,(newValue) =>{
  console.log(newValue);
  
},{
  deep:true
})
watch(()=>userInfor.value.name,(newValue)=>{
  console.log(newValue);
  
})

//一进入页面调用函数
const getList = () =>{
  setTimeout(() => {
    console.log('111111');
    
  }, 1000);
}
getList()

//写成函数可以调用多次，多次调用并不冲突，按照顺序依次执行
onMounted(()=>{
  console.log('mounted生命周期函数');
  
})

const money = ref(100)
const getMoney = () =>{
  money.value += 10
}
const changeFn = (newMoney)=>{
  money.value = newMoney
}

const inp  = ref(null)
const textCom  = ref(null)
const getCom = ()=>{
  console.log(textCom.value.num);
  textCom.value.sayHi()
  
}
//生命周期钩子
/* onMounted(()=>{
  inp.value.focus()
}) */

const onFocus = () =>{
  inp.value.focus()
}
</script>

<template>
  <div>{{ message }}</div>
  <button @click="logMessage">按钮</button>
  <div>{{ mub.count }}</div>
  <button @click="addMub">+1</button>
  <div>{{ node }}</div>
  <button @click="addNode">+1</button>
  <div>before:{{ arr }}</div>
  <div>after:{{ arrFor }}</div>
  <button @click="addArr">数组添加222</button>
  <div>{{ count1 }}</div>
  <button @click="changeCount1">changeCount</button>
  <div>{{ nickName }}</div>
  <button @click="changeNickName" >changeName</button>
  <div>{{ userInfor }}</div>
  <button @click="changeUserInfor">changeUserInforage</button>
  <button @click="changeUserInforname">changeUserInforname</button>
  <div>
    <h2>
      dad - {{ money }}
      <button @click="getMoney">打工</button>
    </h2>
    <sonCom car="ooo" :money="money" @changeMoney="changeFn">dad</sonCom> 
    <div>
      <input ref="inp" type="text">
      <button @click="onFocus">点击聚焦</button>
    </div>
    <testCom ref="textCom"></testCom>
    <button @click="getCom">获取组件</button>
  </div>
</template>

<style scoped></style>
